<script setup lang="ts">
import { useToPage } from '@/common/use/common';
import { ref } from 'vue';

// typescript
interface IProps {
  /**
   * 是否小尺寸
   */
  small?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  small: false
});
const { navigateTo } = useToPage();

const test = ref([
  {title: "高端智能品牌120HZ鱼眼高清屏幕3D手机", thumb: "../../static/images/delete/2.png", sale: 12000, price: 2000},
  {title: "老年高端智能鱼眼高清屏幕超大铃声智能机", thumb: "../../static/images/delete/3.png", sale: 22000, price: 3000},
  {title: "办公学习文件加密智能青少年专用办公机器", thumb: "../../static/images/delete/4.png", sale: 32000, price: 4000}
]);

</script>

<!-- 商品列表 -->
<template>
  <view class="w-components-container w-commodity-list" :class="{small: small}">
    <uni-list>
      <template v-for="(item, index) in test" :key="index">
        <uni-list-item clickable @click="navigateTo('/pages/commodity-detail/commodity-detail?commodityId=1234')">
          <template v-slot:header>
            <image class="thumb" :src="item.thumb" mode="widthFix"></image>
          </template>

          <template #body>
            <div class="item-body">
              <div class="ellipsis-2">{{ item.title }}</div>
              <div class="info">
                <text>￥{{ item.price.toFixed(2) }}</text>
                <text>
                  <template v-if="!$slots.sale">
                    已售{{ item.sale }}件
                  </template>
                  <template v-else>
                    <slot name="sale" :item="item"></slot>
                  </template>
                </text>
              </div>
            </div>
          </template>
        </uni-list-item>
      </template>
    </uni-list>
  </view>
</template>

<style scoped lang="scss">
// scss
.w-commodity-list {
  &.small {
    :deep(.uni-list) {
      .uni-list-item {
        .uni-list-item__container {
          padding: 15rpx 0;
        }
      }

      .uni-list--border-bottom {
        display: none;
      }
    }
  }

  .thumb {
    width: 128rpx;
    height: 128rpx;
  }
}

.item-body {
  flex: 1;
  padding-right: $padding;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .ellipsis-2 {
    font-size: 28rpx;
    line-height: 36rpx;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 24rpx;
      color: #999;

      &:first-child {
        color: $amount-color;
      }
    }
  }
}

.thumb {
  width: 146rpx;
  height: 140rpx;
}
</style>